<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮</title>
	</head>
	<style>
		/* 定义按钮样式 */
		.button {
			box-sizing: border-box;
			background-color: #0965ea;        /* 按钮背景颜色为绿色 */
			border: none;                     /* 去掉按钮边框 */
			color: white;                     /* 字体颜色为白色 */
/* 			padding: 12px 32px;               按钮内边距为15像素顶部和底部，32像素左右 */ 
			text-decoration: none;            /* 去掉文本装饰 */
			display: inline-flex;            /* 将按钮显示为内联弹性布局元素 */
			font-size: 16px;                  /* 字体大小为16像素 */
			margin: 4px 2px;                  /* 按钮外边距为4像素顶部和底部，2像素左右 */
			cursor: pointer;                  /* 鼠标悬停时显示指针形状 */
			border-radius: 2px;
			line-height: 34px;
			width: 80px;
			justify-content: center;  /* 水平居中 */
			align-items: center;  /* 垂直居中 */
		}
		
		.button:hover{
			background-color:rgb(23 114 246 / 74%)	
		}
		
		.button span{
			height: 100%;
			display: inline-flex;            /* 将按钮显示为内联弹性布局元素 */
			margin: 0 3px;
			padding: 0;
		}
		
	</style>
	<body>
		<div>
			<button class="button">按钮</button>	
		</div>
		
		<div>
			<button class="button">
				<span>
					<svg width="16" height="16" viewBox="0 0 24 24"  fill="currentColor"><path d="m7.841 20.043-4.328 1.18a.6.6 0 0 1-.737-.736l1.18-4.324a1.2 1.2 0 0 1 .314-.539l8.094-7.995a.9.9 0 0 1 1.268.003l2.736 2.736a.9.9 0 0 1 .004 1.268l-7.196 7.296-.802.802a1.2 1.2 0 0 1-.533.31ZM19.703 4.81l-.514-.513a2.542 2.542 0 0 0-3.595 0l-.999 1.067a.9.9 0 0 0 .02 1.252l2.77 2.768a.9.9 0 0 0 1.25.02l1.068-.999a2.542 2.542 0 0 0 0-3.594Z"></path></svg>
				</span>
				编辑
			</button>
		</div>
	</body>
</html>